<template>
  <div class="dashboard-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 管理员表格 -->
      <el-tab-pane label="管理员表格" name="first">
        <el-card class="box-card">
          <h1 class="title">管理员设置</h1>
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              prop="registration_server"
              label="ip地址"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="registration_server_port"
              label="端口"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="user_id_name" label="发起方名称">
            </el-table-column>
            <el-table-column prop="user_id" label="发起方id"> </el-table-column>
            <el-table-column prop="password" label="发起方密码">
            </el-table-column>
            <el-table-column prop="call_id_name" label="接收方名称">
            </el-table-column>
            <el-table-column prop="call_id" label="接收方id"> </el-table-column>
            <el-table-column label="操作" width="70">
              <template slot-scope="scope">
                <el-button @click="tablePut(scope.row)">修改</el-button>
              </template>
            </el-table-column>

            <!-- <el-table-column
        prop="voice_type"
        label="音色">
      </el-table-column>
       <el-table-column
        prop="address"
        label="语速倍数">
      </el-table-column> -->
          </el-table>
        </el-card>
      </el-tab-pane>

      <!-- 配置和新增地方id -->
      <el-tab-pane label="配置发起地" name="second">
        <el-card class="box-card">
          <h1 class="title">配置发起地</h1>
          <el-button type="success" @click="InitiatorAdd">新增</el-button>
          <!-- 表格 -->
          <el-table :data="tableInitiatordata" style="width: 100%">
            <el-table-column prop="Initiator_name" label="发起方名称">
            </el-table-column>
            <el-table-column prop="Initiator_id" label="发起方id">
            </el-table-column>
            <el-table-column label="操作" width="350">
              <template slot-scope="scope">
                <span
                  ><el-button @click="InitiatorPut(scope.row)"
                    >修改</el-button
                  ></span
                >
                <span>
                  <el-button @click="delOpen(scope.row.id)"
                    >删除</el-button
                  ></span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 修改对话框 -->
    <el-dialog title="修改" :visible.sync="dialogVisiblePut" width="90%" >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="ip地址">
          <el-input v-model="form.registration_server"></el-input>
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="form.registration_server_port"></el-input>
        </el-form-item>
        <el-form-item label="发起方名称">
          <el-input v-model="form.user_id_name"></el-input>
        </el-form-item>
        <el-form-item label="发起方id">
          <el-input v-model="form.user_id"></el-input>
        </el-form-item>
        <el-form-item label="发起方密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="接收方id">
          <el-input v-model="form.call_id"></el-input>
        </el-form-item>
        <el-form-item label="接收方名称">
          <el-input v-model="form.call_id_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblePut = false">取 消</el-button>
        <el-button type="primary" @click="ajaxput">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改配置发起地对话框 -->
    <el-dialog @close="closeOpen" title="修改" :visible.sync="dialogInitiator.put" width="90%">
      <el-form ref="form" :model="initiatordataform" label-width="80px">
        <el-form-item label="发起方名称">
          <el-input v-model="initiatordataform.Initiator_name"></el-input>
        </el-form-item>
        <el-form-item label="发起方id">
          <el-input v-model="initiatordataform.Initiator_id"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInitiator.put = false">取 消</el-button>
        <el-button type="primary" @click="subitInitiatorPut">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增配置发起地对话框 -->
    <el-dialog title="新增" :visible.sync="dialogInitiator.add" width="90%">
      <el-form ref="form" :model="initiatordataform" label-width="80px">
        <el-form-item label="发起方名称">
          <el-input v-model="initiatordataform.Initiator_name"></el-input>
        </el-form-item>
        <el-form-item label="发起方id">
          <el-input v-model="initiatordataform.Initiator_id"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInitiator.add = false">取 消</el-button>
        <el-button type="primary" @click="subitInitiatorAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSipData,
  sipUpdate,
  ajaxInitiator,
  sipInitiatorPut,
  sipInitiatorAdd,
  sipInitiatorDel,
} from "@/api/sip";
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      tableInitiatordata: [],
      activeName: "first",
      dialogVisiblePut: false,
      dialogInitiator: {
        add: false,
        put: false,
      },
      initiatordataform: {
        Initiator_id: "",
        Initiator_name: "",
      },
      form: {
        id: "",
        registration_server: "",
        registration_server_port: "",
        user_id: "",
        password: "",
        call_id: "",
        user_id_name: "",
        call_id_name: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化
    async init() {
      let res = await getSipData({ pag: 1 });
      console.log(67, res);
      this.tableData = res.data.data.rows;
    },
    // 获得发起地数据
    async init_initiator() {
      let res = await ajaxInitiator();
      this.tableInitiatordata = res.data.meta.data;
    },
    // 修改
    tablePut(data) {
      this.dialogVisiblePut = true;
      this.form = {
        id: String(data.id),
        registration_server: data.registration_server,
        registration_server_port: data.registration_server_port,
        user_id: data.user_id,
        password: data.password,
        call_id: data.call_id,
        user_id_name: data.user_id_name,
        call_id_name: data.call_id_name,
      };
    },
    // 发起修改请求
    async ajaxput() {
      this.dialogVisiblePut = false;
      let res = await sipUpdate(this.form);
      console.log(126, res);
      if (res.status === 200) {
        this.$message.success("更新成功");
        this.init();
      }
    },
    async handleClick(tab, event) {
      // console.log(tab, event);
      if (this.activeName === "second") {
        this.init_initiator();
      }
    },
    // 回显发起地
    InitiatorPut(data) {
      this.dialogInitiator.put = true;
      this.initiatordataform = {
        id: String(data.id),
        Initiator_id: String(data.Initiator_id),
        Initiator_name: data.Initiator_name,
      };
    },
    // 确定修改
    async subitInitiatorPut() {
      let res = await sipInitiatorPut(this.initiatordataform);
      if (res.status === 200) {
        this.$message.success("更新成功");
        this.init_initiator();
        this.initiatordataform = {
          Initiator_id: "",
          Initiator_name: "",
        };
        this.dialogInitiator.put = false;
      }
    },
    InitiatorAdd() {
      this.dialogInitiator.add = true;
    },
    // 新增确定
    async subitInitiatorAdd() {
      let res = await sipInitiatorAdd(this.initiatordataform);
      if (res.status === 200) {
        this.$message.success("新增成功");
        this.init_initiator();
        this.dialogInitiator.add = false;
      }
    },
    // 删除发起地
    delOpen(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await sipInitiatorDel({id});
          if (res.status === 200) {
            this.init_initiator();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 清空对对话框的值
    closeOpen(){
      this.dialogInitiator.put = false
      this.initiatordataform = {
        Initiator_id: "",
        Initiator_name: "",
      }
    }
  },
};
</script>

<style lang="scss" scoped></style>
